<template>
  <div id="HomePage">
    <div class="home-header">
      <div class="home-header-title">启迪智慧-实验室管理平台</div>
      <div class="home-page-menu-container">
        <div class="home-page-menu-list">
          <span
            v-for="item in textMenuList"
            :key="item.routeName"
            class="home-page-menu-item"
            :class="{ active: activeMenu === item.routeName }"
            @click="goToPage(item.routeName)"
            >{{ item.name }}</span
          >
        </div>
        <div class="home-page-icon-menu-list">
          <span
            v-for="item in iconMenuList"
            :key="item.routeName"
            class="home-page-icon-item"
            :class="{ active: activeMenu === item.routeName }"
            @click="goToPage(item.routeName)"
            :title="item.name"
          >
            <el-icon><component :is="item.icon" /></el-icon>
          </span>
        </div>
      </div>
    </div>
    <div class="home-page-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { Bell, Setting } from "@element-plus/icons-vue";

const router = useRouter();
const route = useRoute();
const currentRouteName = route.name;

// 根据用户角色动态设置菜单
const textMenuList = ref<{ name: string; routeName: string }[]>([]);
const iconMenuList = ref<{ name: string; routeName: string; icon: any }[]>([]);
const userInfo = JSON.parse(localStorage.getItem("userInfo") || "{}");
let userRole = "user";
userInfo.roles.forEach((item: any) => {
  if (item.id === 4) {
    userRole = "expert";
  }
  if (item.id === 1 || item.id === 2) {
    userRole = "admin";
  }
});
if (userRole === "admin") {
  textMenuList.value = [
    {
      name: "首页",
      routeName: "Portal",
    },
    {
      name: "设备预约",
      routeName: "EquipmentBooking",
    },
    {
      name: "设备预约管理",
      routeName: "EquipmentBookingManage",
    },
    {
      name: "设备资产管理",
      routeName: "Equipment",
    },
    {
      name: "修改密码",
      routeName: "UpdatePassword",
    },
  ];
  iconMenuList.value = [
    {
      name: "消息通知",
      routeName: "EquipmentAlarm",
      icon: Bell,
    },
    {
      name: "系统管理",
      routeName: "UserManage",
      icon: Setting,
    },
  ];
} else if (userRole === "user") {
  textMenuList.value = [
    {
      name: "首页",
      routeName: "Portal",
    },
    {
      name: "设备预约",
      routeName: "EquipmentBooking",
    },
    {
      name: "设备预约管理",
      routeName: "EquipmentBookingManage",
    },
    {
      name: "修改密码",
      routeName: "UpdatePassword",
    },
  ];
  iconMenuList.value = [
    {
      name: "消息通知",
      routeName: "EquipmentAlarm",
      icon: Bell,
    },
  ];
} else if (userRole === "expert") {
  textMenuList.value = [
    {
      name: "首页",
      routeName: "Portal",
    },
    {
      name: "设备预约",
      routeName: "EquipmentBooking",
    },
    {
      name: "设备预约管理",
      routeName: "EquipmentBookingManage",
    },
    {
      name: "修改密码",
      routeName: "UpdatePassword",
    },
  ];
  iconMenuList.value = [
    {
      name: "消息通知",
      routeName: "EquipmentAlarm",
      icon: Bell,
    },
  ];
}

const activeMenu = ref<string | null>(null);
switch (currentRouteName) {
  case "Portal":
    activeMenu.value = "Portal";
    break;
  case "EquipmentBooking":
    activeMenu.value = "EquipmentBooking";
    break;
  case "EquipmentBookingManage":
    activeMenu.value = "EquipmentBookingManage";
    break;
  case "Equipment":
  case "EquipmentDetails":
    activeMenu.value = "Equipment";
    break;
  case "UserManage":
    activeMenu.value = "UserManage";
    break;
  case "SystemNotify":
  case "EquipmentAlarm":
    activeMenu.value = "EquipmentAlarm";
    break;
  case "UpdatePassword":
    activeMenu.value = "UpdatePassword";
    break;
  default:
}

const goToPage = (page: string) => {
  activeMenu.value = page;
  router.push({
    name: page,
  });
};
</script>

<style scoped lang="scss">
#HomePage {
  width: 100%;
  height: 100%;
  background: #fff;
}
.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  .home-header-title {
    font-family: "douyinbold";
    font-size: $font-size-system-Logo;
    color: $text-color-white;
  }

  .home-page-menu-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
  }

  .home-page-menu-list {
    display: flex;
    align-items: center;
    margin-left: 6rem;

    .home-page-menu-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 4rem;
      margin-left: 4rem;
      padding: 0 2rem;
      font-size: $font-size-page-menu;
      color: $text-color-white;
      cursor: pointer;
      border-radius: 0.5rem;
      transition: all 0.3s ease;
      &:hover {
        text-decoration: underline;
        background: rgba(255, 255, 255, 0.1);
      }
    }
    .home-page-menu-item:first-child {
      margin-left: 0;
    }
    .home-page-menu-item.active {
      color: $text-color-white;
      background: linear-gradient(-45deg, #bcc0f7, #ba97ee);
    }
  }

  .home-page-icon-menu-list {
    display: flex;
    align-items: center;
    gap: 1.5rem;

    .home-page-icon-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 4.5rem;
      height: 4.5rem;
      color: $text-color-white;
      cursor: pointer;
      border-radius: 50%;
      transition: all 0.3s ease;
      font-size: 2rem;

      &:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: scale(1.1);
      }

      &.active {
        background: linear-gradient(-45deg, #bcc0f7, #ba97ee);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }
  }
}

.home-page-content {
  width: 100%;
  height: calc(100% - 5rem);
  padding: 2rem 2rem 1rem;
}
</style>
